/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * 个人信息
 */
import React, {Component} from "react";
import {
    StyleSheet,
    TouchableOpacity,
    Dimensions,
    Image,
    View,
    ToastAndroid,
    ScrollView,
    Button,
    Text,
    TextInput,
    DeviceEventEmitter,
    FlatList,
    SafeAreaView
} from "react-native";
import {DefaultTabBar, ScrollableTabBar} from "react-native-scrollable-tab-view";
import Tips from "react-native-root-tips";
import UsedCouponCell from "./UsedCouponCell";
import EmptyCouponView from "../../../widget/CommonEmptyView";
import GetCouponDialog from "../../../widget/dialog/GetCouponDialog";
import api from "../../../api/api";
import method from "../../../api/method";
import {fetchGetRequest} from "../../../api/NetworkTool";

const {height} = Dimensions.get('window')

type Props = {
    navigation: any,
}

/**
 * 已使用优惠券
 */
export default class UsedCouponScene extends Component<Props> {

    constructor(props: Object) {
        super(props)

        this.state = {
            typeIndex: 0,
            data: [],
            showPwd: false,

        }
    }

    componentDidMount() {
        this.requestData()
    }

    requestData = () => {
        this.requestCoupon()
    }

    requestCoupon = async() => {

        fetchGetRequest(api.usedCoupon, method.get)
            .then(res => {
                console.log(res)
                let dataList = this.mapCouponData(res.coupon)
                this.setState({
                    data: dataList,
                })
            }).catch(err => {
        })


    }

    mapCouponData = (datas) => {
        let dataList = datas.map((data) => {
            return {
                title: data.title,
                count: data.count,
                price: data.price,
                start_datetime: data.start_datetime,
                end_datetime: data.end_datetime,
                coupon_sn: data.coupon_sn,
                tag: 'used_tag',
            }
        })
        return dataList
    }

    render() {

        return (
                <SafeAreaView style={{flex:1,backgroundColor:'#F5F5F5'}}>

                    <FlatList
                        ListHeaderComponent={() => (
                        !this.state.data.length?
                            <EmptyCouponView height={(height-200)} tip={'没有已使用的优惠券'} source={require('../../../../res/img/coupon/youhuiquan.png')}/>
                            : null)
                    }
                        renderItem={this.renderCell}
                        keyExtractor={this.keyExtractor}
                        data={this.state.data}>
                    </FlatList>

                    <GetCouponDialog
                        show={this.state.showPwd}
                        closeModal={(show) => {this.setState({showPwd: show})}}
                        callbackCoupon={(text) => {
                        Tips.showWarn('没有可兑换的优惠券！',{mask:true})
                    }}
                        {...this.props}/>

                    <TouchableOpacity onPress={()=>this.getCoupon()}>
                        <View
                            style={{backgroundColor:'#DB3843',alignItems: 'center',justifyContent:'center',height:50}}>
                            <Text style={{fontSize:16,color:'white'}}>兑换优惠券</Text>
                        </View>
                    </TouchableOpacity>
                </SafeAreaView>
        )
    }

    getCoupon() {
        this.setState({
            showPwd: true
        })
    }


    keyExtractor = (item: Object, index: number) => {
        return item.id + ''
    }

    renderCell = (rowData: any) => {
        return (
            <UsedCouponCell
                info={rowData.item}
                onPress={this.onCellSelected}
            />
        )
    }

    onCellSelected = (info: Object) => {
        this.props.navigation.navigate('couponDetailScene', {info: info})
    }
}


